<template>
	<view class="certificate-list" :class="themeName">
		<!-- #ifndef H5 -->
		<navbar :title="config.query_data.query_title"></navbar>
		<!-- #endif -->
		<view class="certificate-item p-30">
			<u-gap height="180"></u-gap>
			<view class="flex row-center col-center">
				<image :src="$getImageUri('resource/image/shopapi/default/icon_query.png')" mode="widthFix"></image>
			</view>
			<u-gap height="180"></u-gap>
			<view class="search-input m-b-30">
				<u-search class="flex-1" v-model="keyword" height="72" bg-color="#fff" :show-action="false"
					:show-icon="false" shape="square" :placeholder="search_placeholder" />
				<view class="search-action">
					<u-icon class="u-clear-icon" :size="40" name="search" color="rgba(196, 196, 196, 1)"></u-icon>
				</view>
			</view>
			<view class="query-button" @tap="handleSearch">{{config.query_btns.search_btn}}</view>
			<u-gap height="100"></u-gap>
			<view class="scan flex row-center col--center">
				<view class="flex p-20" @click="scanCode">
					<u-icon :size="30" name="scan" color="rgba(153, 153, 153, 1)"></u-icon>
					<text class="m-l-10">{{config.query_btns.scan_btn}}</text>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		apiCertificateConfig,
		apiCertificateList,
	} from '@/api/certificate'
	import {
		baseURL,
		basePath
	} from "@/config/app";
	import wechath5 from "@/utils/wechath5";
	import {
		isWeixinClient
	} from "@/utils/tools";
	export default {
		name: 'CertificateQuery',

		data() {
			return {
				config: {
					cert: {
						code_field: '证书编号',
						name_field: '证书名称',
					},
					query_data: {
						query_title: '证书查询',
						alert_wechat: '请在微信环境打开此网页扫码',
						alert_wechat_config: '请先配置好公众号信息',
						search_placeholder: '',
						no_cert: '没有此证书~',
					},
					query_btns: {
						search_btn: '证书查询',
						scan_btn: '扫码查询',
					},
					query_enabled: 0,
					query_type: 2
				},
				keyword: ''
			}
		},

		computed: {
			search_placeholder() {
				var search_placeholder = this.config.query_data.search_placeholder == undefined || this.config.query_data
					.search_placeholder ==
					'' ?
					this.$zhTran('请输入{code}或{name}') : this.config.query_data.search_placeholder
				search_placeholder = search_placeholder.replace('{code}', this.config.cert.code_field)
				search_placeholder = search_placeholder.replace('{name}', this.config.cert.name_field)
				return search_placeholder
			}
		},

		methods: {
			// 搜索
			handleSearch() {
				if (this.config.query_type == 1) {
					apiCertificateList({
						keyword: this.keyword,
						page_no: 1,
						page_size: 10,
					}).then(({
						lists,
					}) => {
						if (lists.length > 0) {
							this.toDetail(lists[0].id)
						} else {
							this.$toast({
								title: this.config.query_data.no_cert
							})
						}
					})
				} else {
					this.toLists(this.keyword)
				}
			},
			toLists(keyword) {
				this.$Router.push({
					path: '/bundle2/pages/certificate/lists',
					query: {
						keyword
					}
				})
			},
			toDetail(id) {

				if (!this.config.query_enabled) return

				this.$Router.push({
					path: '/bundle2/pages/certificate/detail',
					query: {
						cert_id: id
					}
				})
			},
			scanCode() {
				var that = this;
				// #ifndef H5
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success(res) {
						var codearr = res.result.split('=')
						that.toDetail(codearr[1])
					},
					fail(res) {
						console.log(res)
						// app.alertModal('调用摄像头失败', 2)
					}
				})
				// #endif
				// #ifdef H5
				if (!isWeixinClient()) return this.$toast({
					title: this.config.query_data.alert_wechat
				});

				if (this.$store.state.app.wechat_config_off) return this.$toast({
					title: this.config.query_data.alert_wechat_config
				});

				wechath5.getScanQRCode().then((res) => {
					console.log(res)
					var codearr = res.resultStr.split('=')
					that.toDetail(codearr[1])
				});
				// #endif
			},
			getConfig() {
				return apiCertificateConfig().then((data) => {
					this.config = this.$zhTran(data)

					// #ifdef H5
					uni.setNavigationBarTitle({
						title: this.config.query_data.query_title,
					});
					// #endif
					return Promise.resolve(data);
				}).catch(err => {
					return Promise.reject(err);
				});
			},
		},

		async onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			await this.getConfig()

			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
		background-color: #fff;
	}

	.certificate-item {
		image {
			width: 40%;
		}

		.search-input {
			display: flex;
			align-items: center;
			background-color: #ffffff;
			border: 1rpx solid rgba(232, 232, 232, 1);
			border-radius: 10rpx;

			.search-action {
				display: flex;
				width: 80rpx;
				height: 72rpx;
				align-items: center;
				justify-content: center;
			}
		}

		.query-button {
			width: 100%;
			padding: 20rpx 0;
			border-radius: 5px;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
			background: linear-gradient(90deg, rgba(93, 136, 252, 1) 0%, rgba(56, 103, 255, 1) 100%);
		}

		.scan {
			font-size: 26rpx;
			color: rgba(153, 153, 153, 1);
		}
	}
</style>